<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>RO协议代理</title>
    <link rel="shortcut icon" type="image/png" href="/web/img/favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="/web/css/bootstrap-3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/web/css/style.css">
</head>

<body >
<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-2">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">RO协议代理发送</a>
            </div>
        </div>
    </div>
</nav>
<div id="app" class="container-fluid">
    <div class="row">
        <div class="col-md-3">
                <select v-model="curSelectRoleId" class="form-control" aria-label="Default select" style="font-size: 24px;width: 80%;height: 48px;" @click="cmdQueryRoleList()">
                    <option v-for="role in onlineUsers" :value="role.RoleId">
                        {{ role.RoleName }}  ({{ role.RoleId }})
                    </option>
                </select>
            <br>
            <input type="text" name="protoFilter" size="10" @input="cmdFilterProtocol()" v-model="protoFilter">
            <button type="button" :disabled="curSelectProto == 0 || curSelectRoleId == 0" class="btn btn-success" @click="cmdSendMsg()">发送协议</button> 
            <button type="button" :disabled="curSelectProto == 0 || curSelectRoleId == 0" @click="cmdRefreshProtolParam()" class="btn btn-success">刷新参数</button>
            <div style="overflow-y: auto; height: 850px;">
                <table class="table table-striped table-sm table-hover" >
                    <thead>
                        <tr><th>协议列表</th></tr>
                    </thead>
                    <tbody>
                        <tr v-for='proto, idx in filterProtos' :class="cmdProtocolColor(idx)">
                            <td @dblclick="cmdSelectProtocol(proto.ProtoId, proto.ProtoName)"> {{ proto.ProtoName }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-md-5">  
            <label>当前选择协议: {{ curSelectProtoName }}</label>
            <textarea rows="40" style="width:100%;font-size: 24px;height: 900px;" v-model="protoArg"></textarea>
        </div>
        <div class="col-md-4">
            <label>协议返回结果:</label><br>
            <pre>{{ protoRes }}</pre>
        </div>
    </div>
</div>
<script src="/web/js/third/jquery-3.1.0.min.js"></script>
<script src="/web/css/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="/web/js/third/vue.min.js"></script>
<script src="/web/js/index.js"></script>
</body>
</html>
